// 导入 Sass 内置模块
@use "sass:math";
@use "sass:map";

// 1. 主题变量（基础配置）
$color-primary: #2f54eb;   // 主色调
$color-success: #52c41a;   // 成功色
$color-warning: #faad14;   // 警告色
$color-danger: #ff4d4f;    // 危险色
$color-info: #8c8c8c;      // 信息色

$bg-color-base: #f5f7fa;   // 基础背景色
$bg-color-white: #ffffff;  // 白色背景
$bg-color-gray: #f0f0f0;   // 灰色背景

$text-color-base: #333333;       // 基础文字色
$text-color-secondary: #666666;  // 次要文字色
$text-color-placeholder: #999999; // 占位符文字色
$text-color-light: #ffffff;      // 浅色文字（用于深色背景）

$font-size-xs: 24rpx;  // 超小字体
$font-size-sm: 28rpx;  // 小字体
$font-size-base: 32rpx; // 基础字体
$font-size-lg: 36rpx;  // 大字体
$font-size-xl: 40rpx;  // 超大字体

$border-radius-sm: 4rpx;   // 小圆角
$border-radius-base: 8rpx; // 基础圆角
$border-radius-lg: 12rpx;  // 大圆角
$border-radius-full: 9999rpx; // 全圆角

$spacing-xs: 10rpx;  // 超小间距
$spacing-sm: 20rpx;  // 小间距
$spacing-base: 30rpx; // 基础间距
$spacing-lg: 40rpx;  // 大间距
$spacing-xl: 50rpx;  // 超大间距

$border-color: #e5e5e5; // 边框颜色
$shadow-base: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); // 基础阴影
$shadow-lg: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 大阴影

// 响应式断点
$breakpoints: (
  'xs': 320px,   // 超小屏手机
  'sm': 375px,   // 小屏手机
  'md': 768px,   // 平板
  'lg': 1024px,  // 桌面
  'xl': 1280px   // 大屏桌面
);


// 2. 重置与基础样式
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

page {
  background-color: $bg-color-base;
  font-size: $font-size-base;
  color: $text-color-base;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

// 基础标签样式
a {
  color: $color-primary;
  text-decoration: none;
  &:hover {
    opacity: 0.9;
  }
}

img {
  display: block;
  width: 100%;
  height: auto;
}

input, textarea, select {
  font-family: inherit;
}


// 3. 工具类（布局/文本/边距等）
// Flex 布局
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.flex-1 {
  flex: 1;
}

// 边距工具类
.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-base { margin-top: $spacing-base; }
.mt-lg { margin-top: $spacing-lg; }
.mt-xl { margin-top: $spacing-xl; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-base { margin-bottom: $spacing-base; }
.mb-lg { margin-bottom: $spacing-lg; }
.mb-xl { margin-bottom: $spacing-xl; }

.ml-xs { margin-left: $spacing-xs; }
.ml-sm { margin-left: $spacing-sm; }
.ml-base { margin-left: $spacing-base; }
.ml-lg { margin-left: $spacing-lg; }

.mr-xs { margin-right: $spacing-xs; }
.mr-sm { margin-right: $spacing-sm; }
.mr-base { margin-right: $spacing-base; }
.mr-lg { margin-right: $spacing-lg; }

.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-base { padding: $spacing-base; }
.p-lg { padding: $spacing-lg; }

.pt-xs { padding-top: $spacing-xs; }
.pt-sm { padding-top: $spacing-sm; }
.pt-base { padding-top: $spacing-base; }

.pb-xs { padding-bottom: $spacing-xs; }
.pb-sm { padding-bottom: $spacing-sm; }
.pb-base { padding-bottom: $spacing-base; }

.pl-xs { padding-left: $spacing-xs; }
.pl-sm { padding-left: $spacing-sm; }
.pl-base { padding-left: $spacing-base; }

.pr-xs { padding-right: $spacing-xs; }
.pr-sm { padding-right: $spacing-sm; }
.pr-base { padding-right: $spacing-base; }

// 文本工具类
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: $color-primary; }
.text-success { color: $color-success; }
.text-warning { color: $color-warning; }
.text-danger { color: $color-danger; }
.text-info { color: $color-info; }
.text-light { color: $text-color-light; }

.font-xs { font-size: $font-size-xs; }
.font-sm { font-size: $font-size-sm; }
.font-base { font-size: $font-size-base; }
.font-lg { font-size: $font-size-lg; }
.font-xl { font-size: $font-size-xl; }

.font-bold { font-weight: 600; }
.font-normal { font-weight: 400; }

// 背景工具类
.bg-white { background-color: $bg-color-white; }
.bg-base { background-color: $bg-color-base; }
.bg-gray { background-color: $bg-color-gray; }
.bg-primary { background-color: $color-primary; }

// 边框工具类
.border { border: 1px solid $border-color; }
.border-top { border-top: 1px solid $border-color; }
.border-bottom { border-bottom: 1px solid $border-color; }
.border-left { border-left: 1px solid $border-color; }
.border-right { border-right: 1px solid $border-color; }

// 圆角工具类
.rounded-sm { border-radius: $border-radius-sm; }
.rounded { border-radius: $border-radius-base; }
.rounded-lg { border-radius: $border-radius-lg; }
.rounded-full { border-radius: $border-radius-full; }

// 显示工具类
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }

// 网格布局工具类
.grid {
  display: grid;
  width: 100%;
  gap: $spacing-base;
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }


// 4. 混入（可复用的样式逻辑）
// 文本溢出省略（支持多行）
@mixin ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  @if $lines > 1 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

// 输入框占位符颜色
@mixin placeholder-color($color) {
  &::placeholder {
    color: $color;
    opacity: 1;
  }
  &::-webkit-input-placeholder { color: $color; }
  &::-moz-placeholder { color: $color; }
  &:-ms-input-placeholder { color: $color; }
}

// 响应式混入（大屏优先）
@mixin responsive($breakpoint) {
  $width: map-get($breakpoints, $breakpoint);
  @media (max-width: $width) {
    @content;
  }
}

// 动画混入
@mixin fade-in {
  animation: fadeIn 0.3s ease-in-out;
}
@mixin fade-out {
  animation: fadeOut 0.3s ease-in-out;
}
@mixin slide-up {
  animation: slideUp 0.3s ease-out;
}
@mixin slide-down {
  animation: slideDown 0.3s ease-out;
}


// 5. 动画关键帧
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-20rpx);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}


// 6. 通用组件样式
// 按钮组件
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xs $spacing-base;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;

  &.btn-primary {
    background-color: $color-primary;
    color: $text-color-light;
    &:hover { opacity: 0.9; }
  }
  &.btn-success { 
    background-color: $color-success; 
    color: $text-color-light; 
  }
  &.btn-warning { 
    background-color: $color-warning; 
    color: $text-color-light; 
  }
  &.btn-danger { 
    background-color: $color-danger; 
    color: $text-color-light; 
  }
  &.btn-info { 
    background-color: $color-info; 
    color: $text-color-light; 
  }
  &.btn-outline { 
    border: 1px solid $color-primary; 
    color: $color-primary; 
    background-color: transparent; 
    &:hover { 
      background-color: rgba($color-primary, 0.05);
    }
  }
  &.btn-text { 
    color: $color-primary; 
    background-color: transparent; 
    &:hover { 
      background-color: rgba($color-primary, 0.05);
    }
  }
  
  &.btn-sm { 
    padding: math.div($spacing-xs, 2) $spacing-sm;
    font-size: $font-size-sm; 
  }
  &.btn-lg { 
    padding: $spacing-sm $spacing-lg; 
    font-size: $font-size-lg; 
  }
  &.btn-block {
    display: flex;
    width: 100%;
  }
}

// 卡片组件
.card {
  background-color: $bg-color-white;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  overflow: hidden;
  margin-bottom: $spacing-base;

  .card-header {
    padding: $spacing-sm $spacing-base;
    border-bottom: 1px solid $border-color;
    font-weight: 600;
    font-size: $font-size-base;
  }
  .card-body { 
    padding: $spacing-base; 
  }
  .card-footer {
    padding: $spacing-sm $spacing-base;
    border-top: 1px solid $border-color;
    color: $text-color-secondary;
    font-size: $font-size-sm;
  }
  
  // 卡片变体
  &.card-shadow {
    box-shadow: $shadow-lg;
    &:hover {
      box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
      transform: translateY(-2rpx);
      transition: all 0.3s ease;
    }
  }
  &.card-border {
    box-shadow: none;
    border: 1px solid $border-color;
  }
}

// 表单组件
.form-group {
  margin-bottom: $spacing-base;
  
  .form-label {
    display: block;
    margin-bottom: $spacing-xs;
    font-size: $font-size-base;
    color: $text-color-base;
    font-weight: 500;
  }
  
  .form-control {
    width: 100%;
    min-height: 80rpx;
    padding: 0 $spacing-sm;
    border: 1px solid $border-color;
    border-radius: $border-radius-base;
    font-size: $font-size-base;
    color: $text-color-base;
    background-color: $bg-color-white;
    
    &:focus {
      outline: none;
      border-color: $color-primary;
      box-shadow: 0 0 0 2rpx rgba($color-primary, 0.2);
    }
    
    @include placeholder-color($text-color-placeholder);
  }
  
  .form-textarea {
    @extend .form-control;
    min-height: 160rpx;
    padding: $spacing-sm;
    resize: vertical;
    line-height: 1.6;
  }
  
  .form-hint {
    margin-top: $spacing-xs;
    font-size: $font-size-xs;
    color: $text-color-placeholder;
  }
  
  .form-error {
    margin-top: $spacing-xs;
    font-size: $font-size-xs;
    color: $color-danger;
  }
}

// 列表组件
.list {
  background-color: $bg-color-white;
  border-radius: $border-radius-base;
  overflow: hidden;
  
  .list-item {
    display: flex;
    align-items: center;
    padding: $spacing-sm $spacing-base;
    border-bottom: 1px solid $border-color;
    
    &:last-child {
      border-bottom: none;
    }
    
    .list-icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: $spacing-sm;
      color: $color-primary;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .list-content {
      flex: 1;
      
      .list-title {
        font-size: $font-size-base;
        color: $text-color-base;
      }
      
      .list-desc {
        margin-top: 4rpx;
        font-size: $font-size-xs;
        color: $text-color-secondary;
        @include ellipsis();
      }
    }
    
    .list-extra {
      color: $text-color-secondary;
      font-size: $font-size-sm;
      text-align: right;
    }
    
    .list-arrow {
      color: $text-color-placeholder;
      font-size: $font-size-lg;
      margin-left: $spacing-xs;
    }
  }
  
  &.list-borderless .list-item {
    border-bottom: none;
  }
  
  &.list-inset {
    margin: $spacing-base;
    box-shadow: $shadow-base;
  }
}

// 徽章组件
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36rpx;
  height: 36rpx;
  padding: 0 10rpx;
  border-radius: 18rpx;
  font-size: $font-size-xs;
  line-height: 1;
  font-weight: 500;
  
  &.badge-primary { background-color: $color-primary; color: #fff; }
  &.badge-success { background-color: $color-success; color: #fff; }
  &.badge-warning { background-color: $color-warning; color: #fff; }
  &.badge-danger { background-color: $color-danger; color: #fff; }
  &.badge-info { background-color: $color-info; color: #fff; }
  
  &.badge-dot {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    padding: 0;
  }
  
  &.badge-outline {
    background-color: transparent;
    border: 1px solid $color-primary;
    color: $color-primary;
  }
}

// 导航栏补充样式
.navbar {
  height: 88rpx;
  line-height: 88rpx;
  background-color: $color-primary;
  color: $text-color-light;
  text-align: center;
  font-size: $font-size-lg;
  position: relative;
  font-weight: 500;

  .back-btn {
    position: absolute;
    left: $spacing-base;
    top: 50%;
    transform: translateY(-50%);
    color: $text-color-light;
    font-size: $font-size-xl;
  }
  
  .right-btn {
    position: absolute;
    right: $spacing-base;
    top: 50%;
    transform: translateY(-50%);
    color: $text-color-light;
    font-size: $font-size-base;
  }
}


// 7. 响应式适配
@include responsive('md') {
  // 平板及以下适配
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .navbar {
    height: 80rpx;
    line-height: 80rpx;
  }
}

@include responsive('sm') {
  // 手机屏幕适配
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .spacing-lg {
    padding: $spacing-base;
  }
  
  .btn-lg {
    padding: $spacing-xs $spacing-base;
    font-size: $font-size-base;
  }
}

@include responsive('xs') {
  // 超小屏手机适配
  .font-xl {
    font-size: $font-size-lg;
  }
  
  .p-base {
    padding: $spacing-sm;
  }
}
